<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		    div#box{
		     	text-align:center;
		     }
		    div#box div#btn{
		    	margin:auto ;
		    	width:50px ;
		    	height:50px ;
		    	line-height: 50px;
		    	background-color:#ddd;
		    	border-radius:100%;
		    	color:#fff;
		    	cursor:pointer;
		    }
		</style>
	</head>
	<body>
		<div id="box">
			<div id="btn">
				开
			</div>
			<img id="img" src="img/pic_bulboff.gif" alt=""/>
		</div>
		<script>
			(function(){
				var btn=document.querySelector("#btn");
				var img=document.querySelector("#img");
				btn.onclick=function(){
					console.log("this;",this);
					if(this.innerHTML=="开"){
						img.src="img/pic_bulbon.gif";
						this.innerHTML="关";
						this.style.backgroundColor="green";
					}else{
						img.src="img/pic_bulboff.gif";
						this.innerHTML="开";
						this.style.backgroundColor="#ddd";
					
					}
				}
			}());
		</script>
	</body>
</html>
